<template>
    <div class="common-layout">
        <el-container>
            <el-header
                style=" background-color: #f5f5f5; height: 6vh; display: flex;justify-content: end; align-items: center; ">

                <span>&emsp;搜索：</span>

                <el-input @change="search" v-model="Searchval" style="width: 240px" size="large" placeholder="搜索"
                    :suffix-icon="Search" />&emsp;


                <span>部门选择：</span>
                <el-select v-model="value" placeholder="Select" size="large" style="width: 240px" @change="changebm">
                    <el-option v-for="item in bmoption" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
                &emsp;
                <el-button size="large" :icon="Plus" @click="add">添加设备</el-button>
                <el-button size="large" :icon="User" @click="gouser">用户管理</el-button>
                <el-button size="large" :icon="Upload" @click="sjdc">数据导出</el-button>
                &emsp;

                <el-dropdown trigger="click">
                    <el-button size="large" :icon="ArrowDown">
                        欢迎您: {{ username }}
                    </el-button>

                    <template #dropdown>
                        <el-dropdown-menu>
                            <!-- <el-dropdown-item>关于</el-dropdown-item> -->
                            <el-dropdown-item @click="dialogFormVisible = true">修改密码</el-dropdown-item>
                            <el-dropdown-item @click="loginOut()">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </el-header>
            <el-main style="height:0;flex-grow:1; height: 88vh">
                <el-table v-loading="loading" id="tableId" height="82vh" border fit stripe style="width: 100%"
                    :data="pageList" :header-cell-style="{
                    background: '#ccc', color: '#000000'
                }" :row-class-name="tableRowClassName">
                    <!-- <el-table-column type="selection" width="55" /> -->
                    <el-table-column show-overflow-tooltip width="60" label="序号" align="center" fixed="left">
                        <template #default="scope">
                            {{ scope.$index + 1 }}
                        </template>
                    </el-table-column>
                    <el-table-column show-overflow-tooltip width="180" prop="number" label="编号" align="center"
                        fixed="left" sortable />
                    <el-table-column show-overflow-tooltip width=100 prop="equipmentName" label="设备名称" align="center"
                        :filters="[
                    { text: '电脑', value: '电脑' },
                    { text: '高速扫描', value: '高速扫描' },
                    { text: '平板扫描', value: '平板扫描' },
                    { text: '打印机', value: '打印机' },
                    { text: 'A3扫描', value: 'A3扫描' },
                    { text: '大图扫描', value: '大图扫描' },
                    { text: '交换机', value: '交换机' },
                    { text: '监控', value: '监控' },
                    { text: '刻录机', value: '刻录机' },
                    { text: '电钻', value: '电钻' },
                    { text: '加密狗', value: '加密狗' },
                    { text: '录入笔', value: '录入笔' },
                    { text: '插板', value: '插板' },
                    { text: '裁纸刀', value: '裁纸刀' },
                    { text: '其他', value: '其他' },

                ]" :filter-method="filterHandler" />

                    <el-table-column show-overflow-tooltip width="100" prop="projectLeader" label="项目负责人" align="center"
                        :filters="bmfzrds" :filter-method="filterHandler" />
                    <el-table-column show-overflow-tooltip width=280 prop="entryName" label="项目名称" align="center" />
                    <el-table-column show-overflow-tooltip width=120 prop="approvalTime" label="进场时间" align="center"
                        sortable />

                    <el-table-column show-overflow-tooltip min-width=120 prop="belonging" label="所属部门" align="center">
                        <template #default="scope">
                            <span v-if="scope.row.belonging == 1">数据一部</span>
                            <span v-if="scope.row.belonging == 2">数据二部</span>
                            <span v-if="scope.row.belonging == 3">数据三部</span>
                            <span v-if="scope.row.belonging == 4">数据四部</span>
                            <span v-if="scope.row.belonging == 5">数据五部</span>
                            <span v-if="scope.row.belonging == 6">办公室</span>
                            <span v-if="scope.row.belonging == 7">其他</span>
                        </template>
                    </el-table-column>



                    <el-table-column show-overflow-tooltip min-width=120 prop="realDepartment" label="实在部门"
                        align="center" :filters="[
                    { text: '数据一部', value: 1 },
                    { text: '数据二部', value: 2 },
                    { text: '数据三部', value: 3 },
                    { text: '数据四部', value: 4 },
                    { text: '数据五部', value: 5 },
                    { text: '办公室', value: 6 },
                    { text: '其他', value: 7 },

                ]" :filter-method="filterHandler">
                        <template #default="scope">
                            <span v-if="scope.row.realDepartment == 1">数据一部</span>
                            <span v-if="scope.row.realDepartment == 2">数据二部</span>
                            <span v-if="scope.row.realDepartment == 3">数据三部</span>
                            <span v-if="scope.row.realDepartment == 4">数据四部</span>
                            <span v-if="scope.row.realDepartment == 5">数据五部</span>
                            <span v-if="scope.row.realDepartment == 6">办公室</span>
                            <span v-if="scope.row.realDepartment == 7">其他</span>
                        </template>
                    </el-table-column>
                    <el-table-column show-overflow-tooltip width=180 prop="serialNumber" label="序列号" align="center" />
                    <el-table-column show-overflow-tooltip min-width=80 prop="position" label="是否客户硬盘" align="center" />
                    <el-table-column show-overflow-tooltip width=180 prop="customerDrive" label="客户硬盘序列号"
                        align="center" />
                    <el-table-column show-overflow-tooltip min-width=80 prop="usageSituation" label="设备使用情况"
                        align="center" />
                    <el-table-column show-overflow-tooltip min-width=150 prop="model" label="型号" align="center" />
                    <el-table-column show-overflow-tooltip min-width=80 prop="chassisCondition" label="机箱"
                        align="center" />
                    <el-table-column show-overflow-tooltip min-width=180 prop="remarks" label="备注" align="center" />
                    <el-table-column show-overflow-tooltip min-width=80 prop="maintenanceRecord" label="维修记录"
                        align="center" />sssssssss
                    <el-table-column show-overflow-tooltip min-width=90 prop="equipmentStatus" label="是否启用"
                        align="center" :filters="[
                    { text: '停用', value: '0' },
                    { text: '启用', value: '1' },

                ]" :filter-method="filterHandler">
                        <!-- 设备状态 -->
                        <template #default="scope">
                            <el-tag v-if="scope.row.equipmentStatus == 1" type="success" effect="light">启用</el-tag>
                            <el-tag v-if="scope.row.equipmentStatus == 0" type="danger" effect="light">停用</el-tag>
                        </template>

                    </el-table-column>
                    <el-table-column show-overflow-tooltip min-width=90 prop="processStatus" label="流程状态"
                        align="center">
                        <template #default="scope">
                            <el-tag v-if="scope.row.processStatus == 3" type="danger" effect="light">待审批</el-tag>
                            <el-tag v-if="scope.row.processStatus == 1" type="success" effect="light">定点</el-tag>
                            <el-tag v-if="scope.row.processStatus == 4" type="success" effect="light">已审批</el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column show-overflow-tooltip min-width=200 prop="problemRecord" label="问题记录"
                        align="center" />
                    <el-table-column show-overflow-tooltip min-width=150 prop="checksTime" label="检查时间"
                        align="center" />
                    <el-table-column show-overflow-tooltip min-width=100 prop="checkStatus" label="检查状态" align="center"
                        :filters="[
                    { text: '已处理', value: 2 },
                    { text: '待检查', value: 1 },
                    { text: '待处理', value: 3 },

                ]" :filter-method="filterHandler">


                        <template #default="scope">
                            <el-tag v-if="scope.row.checkStatus == 1" type="danger" effect="light">待检查</el-tag>
                            <el-tag v-if="scope.row.checkStatus == 2" type="success" effect="light">已处理</el-tag>
                            <el-tag v-if="scope.row.checkStatus == 3" type="warning" effect="light">待处理</el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column label="操作" align="center" width="200" fixed="right">
                        <template #default="scope">
                            <el-button size="small" @click="updatas(scope.$index, scope.row)">修改</el-button>
                            <el-button size="small" @click="zshuo(scope.row.id)">追溯</el-button>

                            <el-popconfirm confirm-button-text="是" cancel-button-text="否" :icon="InfoFilled"
                                icon-color="#626AEF" title="确定要删除这条数据吗?" @confirm="del(scope.row.id)"
                                @cancel="cancelEvent">
                                <template #reference>
                                    <el-button size="small" type="danger">删除</el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- <tableVue :bm="value"></tableVue> -->
            </el-main>
            <el-footer style=" background-color: #f5f5f5; height: 6vh; display: flex; align-items: center; ">
                <!-- 分页器 -->
                <el-pagination style="padding: 8px;" v-model:current-page="page" v-model:page-size="pageSize"
                    :page-sizes="[10, 50, 500,]" layout="total, sizes, prev, pager, next, jumper" :total="list.length"
                    :background="true" /></el-footer>
        </el-container>

        <!-- 修改弹出 -->
        <el-drawer v-if="drawer2" v-model="drawer2" direction="btt" size="85%">
            <template #header>
                <!-- <h4>修改</h4> -->
            </template>
            <template #default>
                <!-- 修改 -->
                <div v-if="addorch == 'chang'">
                    <updataVue v-bind="updataFrom" @addEvent="gettable()"></updataVue>
                </div>
                <!-- 添加 -->
                <div v-if="addorch == 'add'">
                    <addVue></addVue>
                </div>
                <!-- 追朔 -->
                <div v-if="addorch == 'zs'">
                    <tableVue :zhid="zhid"></tableVue>
                </div>

            </template>
            <template #footer>
                <div style="flex: auto">
                    <el-button @click="cancelClick">取消</el-button>
                    <!-- <el-button type="primary" @click="confirmClick">confirm</el-button> -->
                </div>
            </template>
        </el-drawer>
        <!-- 密码修改 -->
        <el-dialog v-model="dialogFormVisible" title="修改密码">
            <el-form :model="newdata" label-width="100px">
                <el-form-item label="原密码" password>
                    <el-input v-model="newdata.pass1" autocomplete="off" type="password" />
                </el-form-item>
                <el-form-item label="新密码">
                    <el-input v-model="newdata.pass2" autocomplete="off" type="password" />
                </el-form-item>
                <el-form-item label="确认新密码">
                    <el-input v-model="pass3" autocomplete="off" type="password" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="changepassok()">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
        <el-empty description="无数据" v-show="kkshow" />
    </div>
</template>

<script setup>
import { defineProps, onMounted, ref, computed, reactive } from 'vue';
import { gettables, gettablebm, getqwjs, dellist, getjieshoulist, changepaaa } from '../../sevce/user'
import tableVue from './list.vue'
import updataVue from './updata.vue'
import addVue from './addlist.vue'
import { ElMessage } from 'element-plus'
import { Search, Plus, User, ArrowDown, InfoFilled, Upload } from '@element-plus/icons-vue'
import router from '@/router';
import FileSaver from "file-saver";
import * as XLSX from "xlsx";
let loading = ref(true)
let kkshow = ref(false)
//修改密码
//密码修改框
const dialogFormVisible = ref(false)
//确认修改密码
const newdata = reactive({
    id: JSON.parse(localStorage.getItem('userinfo')).id,
    pass1: '',
    pass2: '',
})
let pass3 = ref('')
let userid = ref("")
let uPassword = ref("")
function changepassok() {
    if (newdata.pass1 != "" && newdata.pass2 != "" && pass3.value != '') {
        if (newdata.pass2 != pass3.value) {
            ElMessage.error('新密码两次输入不相同，请重新输入新密码!!')
        } else {
            changepaaa(newdata).then((res) => {
                if (res.data == 1) {
                    ElMessage({
                        message: '修改成功,重新登录',
                        type: 'success',
                    })
                    dialogFormVisible.value = false
                    localStorage.removeItem("userinfo")
                    router.push("/login")
                } else {
                    ElMessage.error('原密码验证错误')
                }
            }).catch
                (() => {
                    ElMessage.error('联系管理员')
                })

        }
    } else {
        ElMessage.error('请将表单填写完整!!')
    }
}
//修改弹框
const drawer2 = ref(false)
function cancelClick() {
    drawer2.value = false
}

let value = ref(0)
let bmoption = ref([
    {
        value: 0,
        label: '全部',
    },
    {
        value: 1,
        label: '数据一部',
    },
    {
        value: 2,
        label: '数据二部',
    },
    {
        value: 3,
        label: '数据三部',
    },
    {
        value: 4,
        label: '数据四部',
    },
    {
        value: 5,
        label: '数据五部',
    },
    {
        value: 6,
        label: '办公室',
    },

])
//切换部门
function changebm(e) {
    gettable()
    getzrrarr()
}
//修改
let addorch = ref('')
let updataFrom = ref({})
function updatas(index, row) {
    updataFrom.value = row
    drawer2.value = true
    addorch.value = 'chang'
}
//添加
function add() {
    addorch.value = 'add'
    drawer2.value = true
}
//追溯
let zhid = ref(0)
function zshuo(id) {
    zhid.value = id
    addorch.value = 'zs'
    drawer2.value = true
}
//获取数据
let list = ref([])
function gettable() {
    if (value.value != 0) {
        gettablebm(value.value, 3).then((res) => {
            list.value = res.data
            loading.value = false
        })
    } else {
        gettables('', 1).then((res) => {
            list.value = res.data
            loading.value = false
        })
    }

}
//分页
const pageSize = ref(50)
let page = ref(1)
let pageList = computed(() => {
    return list.value.slice((page.value - 1) * pageSize.value, page.value * pageSize.value);
})
//斑马纹颜色
function tableRowClassName({ row, rowIndex }) {
    if (rowIndex % 2 !== 0) {
        return 'el-table__row--striped'
    }
}
//类型筛选
const filterHandler = (value, row, column) => {
    const property = column['property']
    return row[property] === value
}
//责任人筛选

let bmfzrds = ref([])
function getzrrarr() {
    getjieshoulist().then((res) => {
        console.log(res.data[value.value - 1])
        // bmfzr.value = res.data[value.value - 1].users
        //变形整合
        // let obj = { text: '', value: '' }
        var bmfzrd = []
        res.data[value.value - 1].users.forEach((item, index) => {
            // console.log(item)
            // obj.text = item.names, obj.value = item.names
            // console.log(obj)
            bmfzrd.push({ text: item.names, value: item.names })
        });
        // console.log(bmfzr)
        bmfzrds.value = bmfzrd
        console.log(bmfzrds.value)
    })
}
//删除
function del(id) {
    dellist(id).then((res) => {
        console.log('成功')
        if (res.data == 0) {
            ElMessage.error('删除失败')
        } else if (res.data == 1) {
            ElMessage({
                message: '删除成功',
                type: 'success',
            })
            gettable()
        }
    }).catch(() => {
        ElMessage.error('出错了，请联系管理员')
    })

}
function cancelEvent() {
    console.log('')
}
//全文检索
let Searchval = ref('')
function search() {
    getqwjs(Searchval.value).then((res) => {
        list.value = res.data
        // Searchval.value = ''
    })
}
//退出登录
function loginOut() {
    localStorage.removeItem("userinfo")
    router.push("/login")
}
//用户管理
function gouser() {
    router.push('/user')
}
let username = ref('')
onMounted(() => {
    gettable()
    getzrrarr()
    //读取本地存储的数据
    var data = JSON.parse(localStorage.getItem('userinfo'));
    if (data != null) {
        username.value = data.names
    } else {
        return;
    }
    if (list.length == 0) {
        kkshow.value = true
    } else {
        kkshow.value = false
    }
})
//数据导出
function sjdc() {
    //转换成excel时，使用原始的格式
    var xlsxParam = { raw: true };
    let fix = document.querySelector(".el-table__fixed");
    let wb;
    //判断有无fixed定位，如果有的话去掉，后面再加上，不然数据会重复
    if (fix) {
        wb = XLSX.utils.table_to_book(
            document.querySelector("#tableId").removeChild(fix), xlsxParam
        );
        document.querySelector("#tableId").appendChild(fix);
    } else {
        wb = XLSX.utils.table_to_book(document.querySelector("#tableId"), xlsxParam);
    }
    var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
    });
    try {
        FileSaver.saveAs(
            new Blob([wbout], { type: "application/octet-stream" }),
            `导出列表.xlsx`
        ); //文件名
    } catch (e) {
        if (typeof console !== "undefined")
            console.log(e, wbout);
    }
    return wbout;
}
</script>

<style lang="scss" scoped>
.dialog-footer button:first-child {
    margin-right: 10px;
}

::v-deep .el-table__body tr.el-table__row--striped td {
    background-color: #c0c4cc;
}

::v-deep .el-table__row {
    background: skyblue;
}

::v-deep .el-table__body tr:hover>td {
    background-color: #c0c4cc !important;
}
</style>